<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="../../css/materialize.min.css" media="screen,projection"/>
    <link type="text/css" rel="stylesheet" href="../../css/nav.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>问题详细页面</title>
    <style>
        .card-content{
            height:250px;
        }
        .content{
            height: 450px;
        }
        #answer{
            color: #000;
        }
        .text-center{
            text-align: center;
        }
    </style>
</head>

<body>
<nav>
    <div class="nav-wrapper blue">
        <a href="/toInformation" class="brand-logo" id="logo">呜呼</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="hide-on-med-and-down " style="margin-left: 82px">
            <li><a href="/toIndex">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="/toWriteQuestion">提问</a></li>
        </ul>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="/toContact"><i class="material-icons">chat_bubble_outline</i></a></li>
            <li><a href="/toPersonalCenter"><i class="material-icons">perm_identity</i></a></li>
            <li><a href="#"><i class="material-icons">more_vert</i></a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo" style="z-index: 10000">
            <li><a href="/toIndex">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="/toWriteQuestion">提问</a></li>
            <li><a href="/toContact">联系人</a></li>
            <li><a href="/toPersonalCenter">个人中心</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>
</nav>
<div class="row">
    <div class="progress">
        <div class="indeterminate"></div>
    </div>
        <div class="col s12">
            <div class="card white">
                <div class="card-content">
                    <div class="col s12 m8">
                        <div class="chip">
                            类别1
                        </div>
                        <div class="chip">
                            类别2
                        </div>
                        <div class="chip">
                            类别3
                        </div>
                        <div class="chip">
                            类别4
                        </div>
                    </div>
                    <div class="col s12 m8"><h3 class="flow-text"><%=data.title%></h3></div>
                    <div class="forId" id="<%=data._id%>"></div>
                    <div class="col s6 m2 left">
                        <div class="row center">关注者</div>
                        <div class="row center">110</div>
                    </div>
                    <div class="col s6 m2 right">
                        <div class="row center">被浏览</div>
                        <div class="row center">7,100</div>
                    </div>
                    <div class="col s12 m8"><h3 class="flow-text"><%=data.content%></h3></div>
                </div>

                <div class="card-action">
                    <a class="waves-effect blue btn">关注问题</a>
                    <a class="waves-effect green btn addFriend" name="<%= data.owner%>">添加好友</a>
                    <a id="answer" class="waves-effect white btn" href="#writeModal">写回答</a>
                </div>
            </div>
        </div>
</div>

<!-- Modal Structure -->
<div id="writeModal" class="modal">
    <div class="modal-content">
        <!--<form>-->
            <span>请写下您的回答</span>
            <input id="answerContent" name="content" style="height: 200px">
            <button class="answerSubmit waves-effect waves-green btn right modal-action modal-close" style="margin-bottom: 20px">提交回答</button>
        <!--</form>-->
    </div>
</div>

<div class="container row">
    <% var answers = data.answer %>
    <% if (answers.length >= 1) {%>
    <%   for (let i=0;i<answers.length;i++){ %>

           <div class="card white">
               <div class="card-content content">
                   <div class="s2"><i class="material-icons">perm_identity</i></div>
                   <% console.log("answers:::::::::",answers[i].content)%>
                   <div class="s10 ownerName" name="<%=answers[i].owner%>"></div>
                   <div class="col s12 ">
                       <p class="flow-text">
                            <%=answers[i].content%>
                       </p>
                   </div>
               </div>
               <div class="card-action">
                   <a><i class="material-icons">thumb_up</i></a>
                   <a><i class="material-icons">thumb_down</i></a>
               </div>
           </div>
    <%   } %>
    <%}else{%>
    <div class="card white">
        <div class="card-content content">
            <div class="s2"><i class="material-icons">perm_identity</i></div>
            <div class="s10 center">暂无任何人回答</div>
            <div class="col s12 ">
                <p class="flow-text">
                </p>
            </div>
        </div>
    </div>
    <%}%>

</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/materialize.min.js"></script>
<script>
    $(document).ready(function(){
        var id = $(".forId").attr("id");
        $("#sidenav").sideNav();
        $('.modal').modal();
        $(".button-collapse").sideNav({draggable: true});
        $("#leftnavbar").on("click",function () {
            $('.button-collapse').sideNav('hide');
        });

        $(".answerSubmit").on("click",function () {
            var content = $("#answerContent").val();
            console.log("front------------>"+content);
            var send_data = {"content":content};
            $.ajax({
                url : '/questions/answerOne',
                type : "post",
                dataType : "json",
                data : send_data,
                success : function(data, textStatus, jqXHR) {
                    if ('success' == textStatus) {
                        // alert("success");
                        // console.log(data);
                        //成功之后把最新的自己的回答显示出来
                        var div1 = document.createElement("div");
                        div1.setAttribute("class","card white");
                        div1.innerHTML = '<div class="card-content content">\n' +
                            '                   <div class="s2"><i class="material-icons">perm_identity</i></div>\n' +
                            '                   <div class="s10">我当前的回答</div>\n' +
                            '                   <div class="col s12 ">\n' +
                            '                       <p class="flow-text">\n' +
                            '                           '+ content +'   \n' +
                            '                       </p>\n' +
                            '                   </div>\n' +
                            '               </div>\n' +
                            '               <div class="card-action">\n' +
                            '                   <a><i class="material-icons">thumb_up</i></a>\n' +
                            '                   <a><i class="material-icons">thumb_down</i></a>\n' +
                            '               </div>'
                        document.getElementsByClassName("container")[0].appendChild(div1);
                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("error");
                }
            });
        });

        //添加好友行为绑定
        $(".addFriend").on("click",function () {
            var friendId = $(this).attr("name");
            let send_data = {"id":friendId};
            $.ajax({
                url : '/users/addFriend',
                type : "get",
                dataType : "json",
                data : send_data,
                success : function(data, textStatus, jqXHR) {
                    if ('success' == textStatus) {
                        // alert("success");
                        console.log(data);
                        alert("好友添加成功");
                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("error");
                }
            });

        });

        //将用户id换成用户的nickname
        let owners = document.getElementsByClassName("ownerName");
        for (let i=0;i<owners.length;i++)
        {
            let id = owners[i].getAttribute("name");
            console.log("我找到了::::"+id);
            let send_data = {"userid":id};
            $.ajax({
                url : '/users/findById',
                type : "get",
                dataType : "json",
                data : send_data,
                success : function(data, textStatus, jqXHR) {
                    if ('success' == textStatus) {
                        // alert("success");
                        console.log("findById================"+data.nikeName);
                        owners[i].innerHTML = "用户昵称："+data.nikeName;
                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("error");
                }
            });
        }


    });
</script>
</body>
</html>